function makeCtrler(role) {
    "use strict";
    // 控制器
    let ctrler = document.createElement("div");
    ctrler.className = "ctrler";
    // 外环
    let ring = document.createElement("div");
    ring.className = "ring";
    ring.appendChild(ctrler);

    window.state = {
        spd: {
            X: 0,
            Y: 0
        },
        pst: {
            left: 0,
            top: 0
        }
    }

    // 控制飞机的方向
    ring.addEventListener("touchmove", function(event) {
        let touch = event.targetTouches[0];
        let centerY = document.body.clientHeight- touch.pageY;
        let centerX = touch.pageX;
        var moveX = (centerX < 130 && centerX >= 50) ? (centerX - 90) / 20 : (centerX >= 130) ? 2 : -2;
        window.state.spd.X = moveX;

        if (centerY >= 130) {
            var moveY = 2;
        } else if (centerY < 130 && centerY >= 50) {
            var moveY = (centerY - 90) / 20;
        } else {
            var moveY = -2;
        }
        window.state.spd.Y = moveY;
    });
    ring.addEventListener("touchend", function(event) {
        window.state.spd.X = 0;
        window.state.spd.Y = 0;
    });

    window.ctrl = setInterval(function() {
        let roleLeft = parseFloat(role.style.left.replace("px", ""));
        let roleTop = parseFloat(role.style.top.replace("px", ""));
        if (roleLeft > 0 && roleLeft < document.body.clientWidth -25) {
            window.state.pst.left = roleLeft + window.state.spd.X;
            role.style.left = window.state.pst.left + "px";
        } else {
            window.state.pst.left = document.body.clientWidth- 25;
            if (roleLeft > window.state.pst.left) {
                role.style.left = window.state.pst.left -1 + "px";
            }
            if (roleLeft <= 0) {
                window.state.pst.left = 1;
                role.style.left = "1px";
            }
        }
        if (roleTop > 0 && roleTop < document.body.clientHeight) {
            window.state.pst.top = roleTop - window.state.spd.Y;
            role.style.top = window.state.pst.top + "px";
        } else {
            window.state.pst.top = document.body.scrollHeight - 130;
            if (roleTop > window.state.pst.top) {
                role.style.top = window.state.pst.top+ "px";
            }
            if (roleTop <= 0) {
                window.state.pst.top = 1;
                role.style.top = "1px";
            }
        }
    }, 10);

    return {
        "ctrler": ctrler,
        "ring": ring
    };
}